<template>
    <div class="table">
        <div class="crumbs orderTitle">
            <h1 class="orderH1">预约中心</h1>
        </div>
        <div class="selectStore">
            <el-select v-model="storeSelectListTitle" @change="storeSelectListFn" class="handle-select mr10 selectDown">
                <el-option key="0" :value="'全部门店'+this.storeListArr2" label="全部门店"></el-option>
                <el-option v-for="item in storeList" :key="item.shop.id" :value="item.shop.shopName+','+item.shop.id" :label="item.shop.shopName"></el-option>
            </el-select>
            <el-input
                v-model="searchMobile"
                placeholder="请输入会员手机号查询">
                <el-button slot="append" icon="el-icon-search" circle @click="querySearchAsync(searchMobile,1)"></el-button>
            </el-input>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-date-picker
                    v-model="findStartTimeValue"
                    @change="dataSelectFn"
                    :picker-options="pickerOptDef"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-select v-model="select_cate" @change="selectStatusFn" class="handle-select mr10">
                    <el-option key="1" label="全部预约" value="ALL"></el-option>
                    <el-option key="2" label="待确认" value="ACTIVATING"></el-option>
                     <el-option key="3" label="生效" value="NORMAL"></el-option>
                    <!--<el-option key="4" label="已开单" value="COMPLETE"></el-option>-->
                     <el-option key="4" label="已取消" value="CANCELED"></el-option>
                </el-select>
                <el-button type="primary" class="fr" v-if="isUser === 1" @click="addReservation">添加预约</el-button>
            </div>

            <el-table :data="list" border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column  prop="user.name" label="会员" sortable >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="memberDetail(scope.row)">{{scope.row.user.nick}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="reservationTime" label="预约时间" width="180">
                </el-table-column>
                <el-table-column prop="orderStatus" label="状态" >
                </el-table-column>
                <el-table-column prop="additionalInfo" label="备注" >
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button size="small" @click="statusChangeFn(1, scope.row,'请问要确认吗？')" v-if="
                        isUser === 1 &&
                        scope.row.orderStatus !== '取消' &&
                        scope.row.orderStatus !== '已确认'&&
                        scope.row.orderStatus !== '确认到店'">确认</el-button>
                        <el-button size="small" type="success" @click="statusChangeFn(2, scope.row,'确认已到店吗？')" v-if="
                        isUser === 2 &&
                        scope.row.orderStatus !== '取消' &&
                        scope.row.orderStatus !== '确认到店'&&
                        scope.row.orderStatus !== '待确认'">确认到店</el-button>
                        <el-button size="small" type="success" @click="detailsFn(2, scope.row,'')" v-if="
                        isUser === 2 &&
                        scope.row.orderStatus !== '取消' &&
                        scope.row.orderStatus !== '确认到店'&&
                        scope.row.orderStatus !== '待确认'">详情</el-button>
                        <el-button size="small" @click="editReservation(scope.$index, scope.row,true)" v-if="isUser === 1 && scope.row.orderStatus !== '取消'">编辑</el-button>
                        <el-button size="small" type="danger" @click="statusChangeFn(0, scope.row,'确认要取消预约吗？')" v-if="isUser === 1 && scope.row.orderStatus !== '取消'">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, prev, pager, next"
                    :total="pageNum"
                    :page-size="pageSize"
                    :current-page="cur_page">
                </el-pagination>
            </div>
        </div>

        <!-- 添加编辑编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="reservation" width="600px">
            <el-form ref="reservationForm" :model="reservationForm" label-width="150px">
                <el-form-item label="预约门店：">
                    <el-select v-model="storeSelectTitle" @change="storeSelectFn" class="handle-select mr10 selectDown">
                        <el-option v-for="item in storeList" :key="item.shop.id" :value="item.shop.shopName+','+item.shop.id" :label="item.shop.shopName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约时间：">
                    <el-date-picker
                        v-model="reservationForm.reservationTime"
                        type="datetime"
                        :picker-options="pickerOptions0"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="搜索会员：" v-if="ifEdit === 0">
                    <el-input
                        v-model="reservationForm.mobileNumber"
                        placeholder="请输入手机号码"
                    >
                        <el-button slot="append" icon="el-icon-search" circle @click="querySearchAsync(reservationForm.mobileNumber)"></el-button>
                    </el-input>

                </el-form-item>
                <!--<el-form-item label="手机号：" v-if="ifEdit === 0">
                    <el-input v-model="reservationForm.mobileNumber"></el-input>
                </el-form-item>-->
                <el-form-item label="姓名：">
                    <el-input v-model="reservationForm.name"></el-input>
                </el-form-item>
                <el-form-item label="服务项目：">
                    <el-button type="success" @click="serverSelect">点击选择</el-button>
                </el-form-item>
                <el-form-item label="">
                    <el-button disabled v-for="item in serverObj.serverSelectList" :key="item">{{item}}</el-button>
                </el-form-item>

                <el-form-item label="添加一名同行：" v-if="anotherFlag">
                    <el-button type="success" @click="anotherSelect">点击选择</el-button>
                </el-form-item>

                <!--<el-form-item label="">-->
                    <!--<el-button disabled v-for="item in serverObj.anotherSelectList" :key="item">{{item}}</el-button>-->
                <!--</el-form-item>-->

                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="reservationForm.additionalInfo"
                    ></el-input>
                </el-form-item>

                <el-dialog
                    width="500px"
                    title="选择服务"
                    :visible.sync="innerVisible"
                    append-to-body>
                    <el-tabs type="border-card" @tab-click="serviceItemFn($event)">
                        <el-tab-pane v-for="item in serviceItem" :key="item.id"  class="itemList">
                            <span slot="label" :dataId="item.id">{{item.serviceItemGroupName}}</span>
                            <el-checkbox-group v-model="bandStore" @change="selectStoreFn" :menuDataId="item.id">
                                <el-checkbox-button class="bandStore" v-for="store in serviceItem_list" :label="store.id" :key="store.id">{{store.name}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-tab-pane>
                    </el-tabs>
                    <el-button type="success" @click="shelfFn()"><i class="el-icon-plus"></i>确定</el-button>
                </el-dialog>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reservation = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="预约详情" :visible.sync="reservationDetaile" width="600px">
            <el-form ref="reservationForm" :model="reservationForm" label-width="150px">
                <el-form-item label="预约门店：">
                    {{storeSelectTitle}}
                </el-form-item>
                <el-form-item label="预约时间：">
                    {{detailsTime}}
                </el-form-item>
                <el-form-item label="搜索会员：" v-if="ifEdit === 0">
                    {{reservationForm.mobileNumber}}
                </el-form-item>
                <el-form-item label="姓名：">
                    {{reservationForm.name}}
                </el-form-item>
                <el-form-item label="服务项目">
                    <el-button disabled v-for="item in serverObj.serverSelectList" :key="item">{{item}}</el-button>
                </el-form-item>
                <el-form-item label="小伙伴">
                <el-button disabled v-for="item in serverObj.anotherSelectList" :key="item">{{item}}</el-button>
                </el-form-item>

                <el-form-item label="备注">
                    {{reservationForm.additionalInfo}}
                </el-form-item>


            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {formatDate} from '../tool/tool'
    export default {
        data() {
            return {
                isUser: null,
                reservationDetaile: false,
                title:'',
                reservationForm:{
                    reservationClientList:[{serviceItemList:''},{serviceItemList:''}]
                },
                reservationForm2:{
                    reservationClientList:[{serviceItemList:''},{serviceItemList:''}]
                },
                url: './static/vuetable.json',
                tableData: [],
                multipleSelection: [],
                returnData: [],
                serverObj: {
                    serverSelectArr: [],
                    serverSelectObj:[],
                    serverSelectList:[],
                    anotherSelectArr: [],
                    anotherSelectObj:[],
                    // anotherSelectList:[]
                },
                searchMobile: '',
                select_cate: '',
                storeSelectTitle: '全部门店',
                storeSelectListTitle: '全部门店',
                select_word: '',
                serviceItemName: '',
                storeList: '',
                storeListArr: [],
                storeListArr2: null,
                del_list: [],
                reservation: false,
                innerVisible: false,
                editVisible: false,
                delVisible: false,
                ifEdit: false,
                pageNum: null,
                cur_page: 0,
                pageSize: 10,
                serviceItem: null,
                anotherFlag: 0,
                serviceItemId: null,
                serviceItem_list: null,
                bandStore: [],
                bandStoreClone: [],
                tagsList: [],
                form: {
                    name: '',
                    date: '',
                    address: ''
                },
                idx: -1,
                findStartTimeValue:'',
                findEndTimeValue:'',
                pickerOptions0:{
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                list:[],
                pageObj:{
                    page:0,
                    orderStatusEnum: 'ALL',
                    shopIds:null,
                    startTime: '2017-05-22 14:16:40',
                    endTime: '2028-12-16 14:16:40'
                },
                detailsTime:''
            }
        },
        created() {
            this.getStoreList(this.cur_page,111);
            this.getServerItem();
            this.getNewOrder();

        },
        computed: {},
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getStoreList(val-1)
            },
            handleSizeChange(val){
                console.log(val,111111)
            },
            addReservation(){//添加预约
                this.title = '添加预约';
                this.anotherFlag = 1;
                this.ifEdit = 0;
                this.reservation = true;
                this.reservationForm = this.reservationForm2;
                this.storeSelectTitle =  '请选择门店';
                this.serverObj.serverSelectList = [];
            },
            detailsFn(e,val){
                this.reservationDetaile = true
                this.editReservation(e,val,false);
            },
            editReservation(e,val,flag){//修改预约
                this.title = '修改预约';
                this.ifEdit = 1;
                this.storeId = val.id;
                this.reservation = flag;
                this.serverObj.serverSelectArr = [];this.serverObj.serverSelectObj = [];
                 this.serverObj.anotherSelectArr = [];this.serverObj.anotherSelectObj = [];
                storeAsGet('/reservation/detail?reservationId='+this.storeId).then(res=>{
                    console.log(res,'获取预约服务内容')
                    this.reservationForm = res.data.content.reservationView;
                    this.detailsTime = formatDate(new Date(res.data.content.reservationView.reservationTime), 'yyyy-MM-dd hh:mm:ss');
                    this.reservationForm.name = res.data.content.reservationView.user.name;
                    this.storeSelectTitle = this.reservationForm.shop.shopName;
                    this.returnData = this.reservationForm.reservationClientList;
                    this.serverObj.serverSelectList = [];

                    this.returnData[0].serviceItemList.forEach((value,index)=>{
                        console.log(value)
                        this.serverObj.serverSelectList.push(value.name);
                        this.serverObj.serverSelectArr.push(value.id);
                        this.serverObj.serverSelectObj.push({
                            id:value.id
                        });
                    });
                    if(this.returnData[1]){
                        this.serverObj.anotherSelectList = [];
                        this.anotherFlag = 1;
                        this.returnData[1].serviceItemList.forEach((value,index)=>{
                            this.serverObj.anotherSelectList.push(value.name);
                            this.serverObj.anotherSelectArr.push(value.id);
                            this.serverObj.anotherSelectObj.push({
                                id:value.id
                            });
                        });
                    }else{
                        this.anotherFlag = 0
                    }
                    this.getServerInfoItem(this.serviceItem[0].id);
                })

            },
            statusChangeFn(e,val,msg){//修改状态
                console.log(val.orderStatus)
                let status = null;
                let that = this;

                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    switch(e){
                        case 0:
                            status = 'CANCELED';
                            break;
                        case 1:
                            status = 'NORMAL';
                            break;
                        case 2:
                            status = 'ARRIVE';
                            break;
                    }
                    storeAsPut('/reservation/status?reservationId='+ val.id +'&orderStatus=' + status).then(res=>{
                        that.getReservation({
                            page:this.cur_page - 1,
                            orderStatusEnum: this.pageObj.orderStatusEnum,
                            shopIds:this.pageObj.shopIds,
                            startTime:this.pageObj.startTime,
                            endTime:this.pageObj.endTime,
                        })
                    });
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });

            },
            dataSelectFn(data){//日期搜索预约列表
                if(!data){
                    data = [
                        this.pageObj.startTime,
                        this.pageObj.endTime
                    ];
                    this.getReservation({
                        page:this.cur_page,
                        orderStatusEnum:this.pageObj.orderStatusEnum,
                        shopIds:this.pageObj.shopIds,
                        startTime:data[0],
                        endTime:data[1],
                    });
                }else{
                    this.pageObj.startTime = formatDate(data[0], 'yyyy-MM-dd hh:mm:ss');
                    this.pageObj.endTime = formatDate(data[1], 'yyyy-MM-dd hh:mm:ss');

                    this.getReservation({
                        page:this.cur_page,
                        orderStatusEnum:this.pageObj.orderStatusEnum,
                        shopIds:this.pageObj.shopIds,
                        startTime:formatDate(data[0], 'yyyy-MM-dd hh:mm:ss'),
                        endTime:formatDate(data[1], 'yyyy-MM-dd hh:mm:ss'),
                    });
                }

            },
            selectStatusFn(arr){//状态搜索预约列表
                console.log(arr,99669966)
                this.pageObj.orderStatusEnum = arr;
                this.getReservation({
                    page:this.cur_page,
                    orderStatusEnum: arr,
                    shopIds:this.pageObj.shopIds,
                    startTime:this.pageObj.startTime,
                    endTime:this.pageObj.endTime,
                });
            },
            querySearchAsync(queryString,flag){//添加预约 搜索手机号 验证  and  手机号搜索预约列表
                console.log(queryString)
                let reg = /^1[345678]\d{9}$/;
                if(reg.test(queryString)){

                    if(flag === 1){
                        this.getReservation({
                            mobileNumber: queryString
                        });
                        this.pageObj.mobileNumber = queryString;
                    }else{
                        storeAsGet('/users/mobile?mobileNumber='+ queryString).then(res=>{
                            if(res.data.code === '111'){
                                this.$message.error('手机号码未注册，请向下补充预约内容');
                            }else{
                                console.log(res.data.content.user.name,111)
                                if(res.data.content.user.name){
                                    this.reservationForm.name = res.data.content.user.name;
                                }else{
                                    this.reservationForm.name = res.data.content.user.nick;
                                }
                                Vue.set(this.reservationForm,1,res.data.content.user.name);
                            }
                        })
                    }
                }else{
                    this.$message.error('手机格式错误');
                }
            },
            searchFn(item){
                console.log(item)
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleDelete(index, row) {
                this.idx = index;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            saveEdit() { // 保存编辑
                this.reservationForm.reservationClientList[0].serviceItemList =  this.serverObj.serverSelectObj;
                if(this.reservationForm.reservationClientList[1]){
                    this.reservationForm.reservationClientList[1].serviceItemList = this.serverObj.anotherSelectObj;
                }
                if(this.ifEdit){//修改
                    console.log(this.reservationForm)
                    storeAsPut('/reservation/detail?reservationId='+ this.reservationForm.id, this.reservationForm).then(res=>{
                        console.log(res,'修改')
                        this.getStoreList(this.cur_page);
                        this.reservation = false;
                        this.$message.success(`修改成功`);
                    });
                }else{//添加
                    console.log(this.reservationForm)
                    storeAsPost(this.reservationForm,'/reservation/detail').then(res=>{
                        console.log(res,'添加')
                        this.getStoreList(this.cur_page);
                        this.reservation = false;
                        this.$message.success(`添加成功`);
                    });

                }
            },
            storeSelectListFn(command){//选择门店筛选预约列表
                console.log(command)
                if(command.substr(0,4) === '全部门店'){
                    this.storeSelectListTitle = command.substr(0,4);
                    this.reservationForm.shop= {
                        id: command.substr(4)
                    };
                    this.pageObj.shopIds = command.substr(4);
                    this.getReservation({
                        page:this.cur_page,
                        orderStatusEnum: this.pageObj.orderStatusEnum,
                        shopIds:command.substr(4),
                        startTime:this.pageObj.startTime,
                        endTime:this.pageObj.endTime,
                    })
                }else{
                    this.storeSelectListTitle = command.split(',')[0];
                    this.reservationForm.shop= {
                        id: command.split(',')[1]
                    };
                    this.pageObj.shopIds = command.split(',')[1];
                    this.getReservation({
                        page:this.cur_page,
                        orderStatusEnum: this.pageObj.orderStatusEnum,
                        shopIds:this.reservationForm.shop.id,
                        startTime:this.pageObj.startTime,
                        endTime:this.pageObj.endTime,
                    })
                }
            },
            storeSelectFn(command){//添加预约  门店选择
                this.storeSelectTitle = command.split(',')[0];
                    this.reservationForm.shop= {
                    id: command.split(',')[1]
                }
            },
            getStoreList(curPage,flag){//获取门店列表
                this.storeListArr = [];
                storeAsGet('/shop/user/relation/userId').then(res => {
                    console.log(res,'这里是绑定的门店 ')
                    this.storeList = res.data.content.shopUserRelationList;
                        Array.prototype.slice.call(this.storeList).forEach((value,index)=>{
                            this.storeListArr.push(value.shop.id)
                        });
                    this.storeListArr2 = this.storeListArr.join(',');
                    if(flag === 111){
                        this.pageObj.shopIds = this.storeListArr2;
                        this.getReservation({
                            page:curPage,
                            orderStatusEnum: 'ALL',
                            shopIds: this.storeListArr2,
                            startTime: '2017-05-22 14:16:40',
                            endTime: '2028-12-16 14:16:40'
                        });
                    }else{
                        this.getReservation({
                            page:curPage,
                            orderStatusEnum:this.pageObj.orderStatusEnum,
                            shopIds:this.pageObj.shopIds,
                            startTime:this.pageObj.startTime,
                            endTime:this.pageObj.endTime,
                        });
                    }
                });
            },
            getNewOrder(){//未处理预约提示
                storeAsGet('/reservation/activating').then(res => {
                    console.log(res,'这里是还未处理的预约')
                    if(res.data.content.num > 0){
                        this.$notify({
                            title: '提示',
                            message: '您有'+res.data.content.num + '条未处理的预约！'
                        });
                    }
                });
            },
            getReservation(obj){//获取预约列表
                let userRole = null;
                let filters =  {
                    formatDate(time) {
                        let date = new Date(time);
                        return formatDate(date, 'yyyy-MM-dd hh:mm')
                    }
                };
                // !obj && (obj = {});

                console.log(localStorage.getItem('userRole'),'这里是预约列表，看看是否获取到角色然后设置isUser')
                if(localStorage.getItem('userRole')){
                    userRole = localStorage.getItem('userRole');
                    if(userRole === '咨询'){
                        this.isUser = 1;
                    }else if(userRole === '店长'){
                        this.isUser = 2;
                    }else if(userRole === '管理员'){
                        this.isUser = 3;
                    }else {
                        this.isUser = 4;
                    }
                }

                // let arrObj = {};
                // console.log(obj.orderStatusEnum,'预约列表')
                // console.log(arrObj,'这里是条件哟~')
                //
                // obj.page ? arrObj.page = obj.page : arrObj.page = '0';
                // obj.orderStatusEnum ? arrObj.orderStatusEnum = obj.orderStatusEnum : arrObj.orderStatusEnum = 'ALL';
                // obj.shopIds ? arrObj.shopIds = obj.shopIds : arrObj.shopIds =  this.storeListArr2;
                // obj.startTime ? arrObj.startTime = this.pageObj.startTime : arrObj.startTime = '2017-05-22 14:16:40';
                // obj.endTime ? arrObj.endTime = this.pageObj.endTime : arrObj.endTime = '2028-12-16 14:16:40';
                if(obj.mobileNumber){
                    obj.orderStatusEnum = obj.shopIds = obj.startTime = obj.endTime = '';
                    obj.page = 0
                }else{
                    obj.mobileNumber = ''
                }
                storeAsGet('/reservation/page/shop?' +
                    'page=' + obj.page +
                    '&size=' + this.pageSize+
                    '&direction=DESC' +
                    '&propertie=createdTime&' +
                    'orderStatusEnum='+obj.orderStatusEnum +
                    '&shopIds='+obj.shopIds +
                    '&startTime='+ obj.startTime +
                    '&endTime='+ obj.endTime +
                    '&mobileNumber='+obj.mobileNumber)
                    .then(res => {
                    console.log(res)


                    this.pageNum = res.data.content.reservationViewPage.totalElements;
                    this.list = res.data.content.reservationViewPage.content;




                    Array.prototype.slice.call(this.list).forEach((value,index)=>{
                        console.log(value.user.nick)
                        if(!value.user.nick){
                            value.user.nick = value.user.mobileNumber
                        }
                        value.reservationTime = filters.formatDate(value.reservationTime);
                        console.log(value)
                        switch(value.orderStatus){
                            case 'ACTIVATING':
                                value.orderStatus = '待确认';
                                break;
                            case 'NORMAL':
                                value.orderStatus = '已确认';
                                break;
                            case 'ARRIVE':
                                value.orderStatus = '确认到店';
                                break;
                            case 'CANCELED':
                                // this.isUser = 3;
                                value.orderStatus = '取消';
                                break;
                            case 'DISABLED':
                                // this.isUser = 3;
                                value.orderStatus = '取消';
                                break;
                        }


                    });
                });
            },
            getServerItem(){//获取服务栏目
                storeAsGet('serviceItem/group/all/status?direction=DESC&propertys=serviceItemGroupName&status=NORMAL').then(res =>{
                    this.serviceItem = res.data.content.list;
                    this.serviceItemId = this.serviceItem[0].id;
                    this.serviceItemName = this.serviceItem[0].serviceItemGroupName;
                    this.getServerInfoItem(this.serviceItem[0].id);
                })
            },
            serviceItemFn(e){//获取当前项目下内容列表
                this.serviceItemId = e.$vnode.key;
                this.getServerInfoItem(this.serviceItemId)
            },
            getServerInfoItem(id){//点击获取服务内容
                /*let eachMenu = index=> {
                    Array.prototype.slice.call(this.returnData[index].serviceItemList).forEach((value)=>{
                        if(value.serviceItemGroup.id === id){
                            this.bandStore.push(value.id)
                        }
                    });
                };
                if(this.ifEdit === 1){
                    this.bandStore = [];
                    if(this.serverFlag === 1){
                        eachMenu(0)
                    }else{
                        eachMenu(1)
                    }
                }*/
                storeAsGet('serviceItem/group/status?groupId='+id+'&status=NORMAL').then(res=>{
                    this.serviceItem_list = res.data.content.list;
                });
                storeAsGet('shop/serviceItem/relation/shopId?shopId='+id).then(res=>{
                });
            },
            selectStoreFn(arr){//选择服务内容
                console.log(arr)
                this.bandStoreClone = [];
                Array.prototype.slice.call(arr).forEach((value, index)=>{
                    this.bandStoreClone[index] = {
                        id:arr[index]
                    }
                });
                console.log(this.bandStoreClone)
                this.bandStore = arr;
            },
            shelfFn(){
                if(this.ifEdit === 1){
                    if(this.serverFlag === 1){
                        this.serverObj.serverSelectArr = this.bandStore;
                        // this.serverObj.serverSelectList = [];
                        // Array.prototype.slice.call(this.returnData[0].serviceItemList).forEach((value)=>{
                        //     this.serverObj.serverSelectList.push(value.name);
                        // });
                        this.serverObj.serverSelectObj = this.bandStoreClone;
                    }else{
                        this.serverObj.anotherSelectArr = this.bandStore;
                        this.serverObj.anotherSelectList = [];

                        Array.prototype.slice.call(this.returnData[1].serviceItemList).forEach((value)=>{
                            this.serverObj.anotherSelectList.push(value.name);
                        });
                        this.serverObj.anotherSelectObj = this.bandStoreClone;
                    }
                }else{
                    if(this.serverFlag === 1){
                        this.serverObj.serverSelectArr = this.bandStore;
                        this.serverObj.serverSelectObj = this.bandStoreClone;
                    }else{
                        this.serverObj.anotherSelectArr = this.bandStore;
                        this.serverObj.anotherSelectObj = this.bandStoreClone;
                    }
                }

                this.innerVisible = false
                console.log(this.serverObj.serverSelectArr)
                console.log(this.serverObj.serverSelectArr)

            },
            serverSelect(){
                this.serverFlag = 1;
                this.innerVisible  = true;
                this.bandStore = this.serverObj.serverSelectArr;
                this.bandStoreClone = this.serverObj.serverSelectObj;
            },
            anotherSelect(){
                this.serverFlag = 0;
                this.innerVisible  = true;
                this.bandStore = this.serverObj.anotherSelectArr;
                this.bandStoreClone = this.serverObj.anotherSelectObj;
            },
            memberDetail(e){
                this.$router.push({
                    path: '/memberDetails',
                    query: {
                        id: e.user.id
                    }
                })
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .orderH1{
        font-size: 20px;
        color: #666;
        display: inline-block;
    }
    .orderTitle{
        margin-bottom: 60px;
    }
    .selectStore{
        position: absolute;
        right: 40px;
        top: 80px;
        width: 200px;
    }
    .selectDown{
        width: 200px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
        background: #fff;
        cursor: pointer;
    }

</style>
